<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-content">
		<form class="mui-input-group">
		   <ul class="mui-table-view">
		       <li class="mui-table-view-cell mui-media">
		           <a id="myIcon" href="javascript:;">
		           	   <span class="mui-pull-right mui-icon mui-icon-arrowright" style="line-height: 42px; color: lightgray;margin-left: 3px;"></span>
		               <img id="icon" class="mui-media-object mui-pull-right" src="" style="border-radius: 5px;"/>
		               <div class="mui-media-body" style="line-height: 42px;font-size: 16px;">
		                   	头像
		               </div>
		           </a>
		       </li>
		       <li class="mui-table-view-cell mui-media">
		           <a href="javascript:;">
	           		   <span class="mui-pull-right mui-icon mui-icon-arrowright" style="color: lightgray;margin-left: 3px;"></span>
	           		   <span id="nickname" class="mui-pull-right" style="font-size: 14px;color: gray;"></span>
		               <div class="mui-media-body" style="font-size: 16px;">
		                   	昵称
		               </div>
		           </a>
		       </li>
		       <li class="mui-table-view-cell mui-media">
		           <a href="javascript:;">
		               <span id="username" class="mui-pull-right" style="font-size: 14px; color: gray;margin-right: 10px;"></span>
		               <div class="mui-media-body" style="font-size: 16px;">
		                   	简聊号
		               </div>
		           </a>
		       </li>
		       <li class="mui-table-view-cell mui-media">
		           <a id="myQrCode" href="javascript:;">
	           	 	   <span class="mui-pull-right mui-icon mui-icon-arrowright" style="color: lightgray;margin-left: 3px;"></span>
		               <img class="mui-media-object mui-pull-right" src="../../img/qrcode.png"
		               		style="min-width: 20px; height: 20px;">
		               <form class="mui-media-body" font-size: 16px;">
		                   	我的二维码
		               </div>
		           </a>
		       </li>
		   </ul>
		   
		   <br />
		   
		   <ul class="mui-table-view">
		   		<li class="mui-table-view-cell mui-media">
		           <a href="javascript:;">
	           	 	   <span class="mui-pull-right mui-icon mui-icon-arrowright" style="color: lightgray;margin-left: 3px;"></span>
		               <img class="mui-media-object mui-pull-right" src="../../img/qrcode.png" style="min-width: 20px; height: 20px;"/>
		               <div class="mui-media-body" font-size: 16px;">
		                   	友情推广
		               </div>
		           </a>
		       </li>
		   </ul>
		  </form> 
		  <br />
		   
		   <ul class="mui-table-view">
		   		<li class="mui-table-view-cell mui-media" style="text-align: center;font-size: 18px;color: #FFFFFF;background-color: red;">
		           <a id="logout" href="javascript:;">
	           	 	   <span style="line-height: 30px;">退出登录</span>
		           </a>
		       </li>
		   </ul>
		   
		  
		</div>
		
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/mui.upload.js" ></script>
		<script type="text/javascript" src="../../js/app.js" ></script>
		<script type="text/javascript">
			mui.init()
			
			mui.plusReady(function() {
				
				getUserInfo();
				
				//自定义刷新列表
				window.addEventListener("refreshPage", function(){
					getUserInfo();
				});
				
				//获取用户信息
				var currentView = plus.webview.currentWebview();
				currentView.addEventListener("show", function() {
					getUserInfo();
				});

				/*点击头像触发*/ 
				document.getElementById('myIcon').addEventListener('tap', function() { 
   					if (mui.os.plus) { 
       					var a = [{ 
           							title: "拍照",
           							color: "#007AFF"
       							}, { 
           							title: "从手机相册选择",
           							color: "#007AFF"
       							}]; 
				       plus.nativeUI.actionSheet({ 
				           title: "修改用户头像", 
				           cancel: "取消",
				           buttons: a 
				       }, function(b) { /*actionSheet 按钮点击事件*/ 
				           switch (b.index) { 
				              case 0: 
				                     break; 
				              case 1: 
				                     getImages(); /*拍照*/ 
				                     break; 
				              case 2: 
				                     galleryImages();/*打开相册*/ 
				                     break; 
				              default: 
				                     break; 
				             } 
			            }, false);
				    } 
				}); 
				
				
				/*点击二维码触发*/ 
				document.getElementById('myQrCode').addEventListener('tap', function() { 
					mui.openWindow("feixin_qrcode.html", "feixin_qrcode.html");
				});
				
				//退出登录
				document.getElementById("logout").addEventListener("tap", function(){
					app.removeUserInfo();
					app.removeToken();
					mui.openWindow("../../login.html", "login.html");
				});
				
			});
			
			//拍照
		    function getImages(){
		        var mobileCamera=plus.camera.getCamera();
		        var res = mobileCamera.supportedImageResolutions[0];
				var fmt = mobileCamera.supportedImageFormats[0];
		        mobileCamera.captureImage(
		        	function(e){
			            plus.io.resolveLocalFileSystemURL(e,function(entry){
			                var path=entry.toLocalURL()+'?version='+new Date().getTime();
			                uploadIcon(path);
			            },function(err){
			                //console.log("读取拍照文件错误");
			                app.showToast("上传失败", "error");
			            });
		        	},
		        	function(e){
		        		
			        },
			    	{resolution:res,format:fmt}
		        );
		    }
		
		    //从本地相册选择
		    function galleryImages(){
		        plus.gallery.pick(function(a){
		            plus.io.resolveLocalFileSystemURL(a,function(entry){
		                plus.io.resolveLocalFileSystemURL('_doc/',function(root){
		                    root.getFile('head.png',{},function(file){
		                        //文件已经存在
		                        file.remove(function(){
		                            //console.log("文件移除成功");
		                            entry.copyTo(root,'head.png',function(e){
		                                var path=e.fullPath+'?version='+new Date().getTime();
		                                uploadIcon(path);
		                            },function(err){
		                                //console.log("copy image fail: ",err);
		                                app.showToast("上传失败", "error");
		                            });
		                        },function(err){
		                            //console.log("删除图片失败：（"+JSON.stringify(err)+")");
		                            app.showToast("上传失败", "error");
		                        });
		                    },function(err){
		                        //打开文件失败
		                        entry.copyTo(root,'head.png',function(e){
		                            var path=e.fullPath+'?version='+new Date().getTime();
		                            uploadIcon(path);
		                        },function(err){
		                            //console.log("上传图片失败：（"+JSON.stringify(err)+")");
		                            app.showToast("上传失败", "error");
		                        });
		                    });
		                },function(e){
		                    //console.log("读取文件夹失败：（"+JSON.stringify(err)+")");
		                    app.showToast("上传失败", "error");
		                });
		            });
		        },function(err){
		            //console.log("读取拍照文件失败: ",err);
		            app.showToast("上传失败", "error");
		        },{
		            filter:'image'
		        });
		    };
			
			function getUserInfo() {
				var userInfo = app.getUserInfo();
				var imageIcon = userInfo.avatar;
				var nickname = userInfo.nickname;
				var username = userInfo.username;
				document.getElementById("username").innerHTML = username;
				document.getElementById("nickname").innerHTML = nickname;
				document.getElementById("icon").src = imageIcon;
			}
			
			function uploadIcon(imgPath) {
				
				//选中图片之后，头像当前的照片变为选择的照片
		        document.getElementById('icon').src=imgPath;
		        
		        plus.nativeUI.showWaiting("上传中...");
				
				var userInfo = app.getUserInfo();
        		
        		var task=plus.uploader.createUpload(
        			app.serverUrl + "/simple-chat/fdfs/upload",
        			{
	        			method:"POST",
	        			headers:{'Authorization':'Bearer ' + app.getToken()}
        			},
	                function(t,status){ //上传完成
	
						plus.nativeUI.closeWaiting(); //关闭等待提示按钮
						
	                    if(status==200){
	                        var data = JSON.parse(t.responseText);
							var userVo = data.data;
							
							app.removeUserInfo();
							userInfo.avatar = userVo.avatar;
							userInfo.avatar_source = userVo.avatar_source;
							app.setUserInfo(userInfo);
							document.getElementById("icon").src = userVo.avatar;
							
							var meWebview = plus.webview.getWebviewById("feixin_me.html");
							mui.fire(meWebview, "refreshPage");
	                    }else{
	                        app.showToast("上传失败", "error");
	                    }
	                }
	            );  
	            //将文件集合添加到上传队列中
			    task.addFile(imgPath, {key:"file"});
	            task.addData("userId",userInfo.userId);
	            task.start();
			}
		</script>
	</body>

</html>